<template>
  <h1>容器组件 </h1>
  <div class="common-layout">
    <el-container>
      <el-header class="header">后台管理系统</el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu mode="vertical" >
            <el-menu-item class="aside" index="1">员工管理</el-menu-item>
            <el-menu-item class="aside" index="2">轮播图管理</el-menu-item>
            <el-menu-item class="aside" index="3">商品管理</el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <el-table :data="user" >
            <el-table-column label="编号" type="index" width="80px" align="center"/>
            <el-table-column prop="name" label="姓名" align="center" />
            <el-table-column prop="age" label="年龄" align="center" />
            <el-table-column prop="gender" label="性别" align="center" />
            <el-table-column prop="phone" label="电话" align="center" />
            <el-table-column prop="address" label="住址" align="center" />

          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script setup>
  import {ref} from "vue";

  const user = [
      {name:'张飞',age:'18',gender:'男',phone:'15724482236',address:'北京市大钟寺校区'},
      {name:'张飞',age:'18',gender:'男',phone:'15724482236',address:'北京市大钟寺校区'},
      {name:'张飞',age:'18',gender:'男',phone:'15724482236',address:'北京市大钟寺校区'},
      {name:'张飞',age:'18',gender:'男',phone:'15724482236',address:'北京市大钟寺校区'},
      {name:'张飞',age:'18',gender:'男',phone:'15724482236',address:'北京市大钟寺校区'},
      {name:'张飞',age:'18',gender:'男',phone:'15724482236',address:'北京市大钟寺校区'}
  ]

</script>

<style scoped>
  .aside{
    color:#0aa1ed;
  }
  .header{
    background-color: #0aa1ed;
    height: 34px;
    color: #ffffff;
    font-size: 25px;
    padding-left:0;
    font-weight: bold;
  }
</style>